<template>
  <div class="pageContent">
    <div class="centerAll demo-ruleForm">
      <el-form :inline="true" ref="queryFormRef">
        <el-form-item v-if="checkboxValInput.includes('patient_name')">
          <el-input v-model="order.patient_name" placeholder="患者姓名" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('doctor_name')">
          <el-input v-model="order.doctor_name" placeholder="医生/团队名称" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('patient_mobile')">
          <el-input v-model="order.patient_mobile" placeholder="患者手机号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('order_sn')">
          <el-input v-model="order.order_sn" placeholder="处方编号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('drug_process')">
          <!--药态-->
          <el-select v-model="order.drug_process" placeholder="药态" clearable @clear="handleClear" style="width: 180px">
            <el-option v-for="item in drug_process" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('order_status')">
          <!--订单状态-->
          <el-select v-model="order.order_status" placeholder="订单状态" clearable @clear="handleClear">
            <el-option v-for="item in order_status" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>

        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('create_start_time')">
          <!--订单生成日期-->
           <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]">
          <el-date-picker v-model="order.create_start_time" type="daterange" range-separator="-"
            start-placeholder="订单生成开始时间" end-placeholder="订单生成结束时间" :size="size" clearable @change="handleClearD"
            format="YYYY-MM-DD" date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
            </el-config-provider>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('pay_start_time')">
          <!--订单支付日期-->
          <el-date-picker v-model="order.pay_start_time" type="daterange" range-separator="-"
            start-placeholder="订单支付开始时间" end-placeholder="订单支付结束时间" :size="size" clearable @change="handleClearD"
            format="YYYY-MM-DD" date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('is_confirm')">
          <!--是否确认处方-->
          <el-select v-model="order.is_confirm" placeholder="是否确认处方" clearable @clear="handleClear">
            <el-option v-for="item in is_confirm" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <!--        <el-form-item>
          <el-select v-model="" placeholder="Select" style="width: 167.5px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->
        <!--病例状态-->

        <el-form-item v-if="checkboxValInput.includes('pay_status')">
          <!--支付状态-->
          <el-select v-model="order.pay_status" placeholder="支付状态" clearable @clear="handleClear">
            <el-option v-for="item in pay_status" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('mechanism_id')">
          <!--医生属地-->
          <el-select v-model="order.mechanism_id" filterable remote reserve-keyword placeholder="医生属地"
            remote-show-suffix :remote-method="remoteMethod" :loading="loading" clearable @clear="handleClear">
            <el-option v-for="item in mechanism_list" :key="item.value" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('drugstore_id')">
          <!--药房-->
          <el-select v-model="order.drugstore_id" filterable remote reserve-keyword placeholder="药房" remote-show-suffix
            :remote-method="remoteMethod" :loading="loading" clearable @clear="handleClear">
            <el-option v-for="item in drug_store" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('is_fast')">
          <!--开放类型-->
          <el-select v-model="order.is_fast" placeholder="开方类型" clearable @clear="handleClear">
            <el-option v-for="item in is_fast" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('prescription_order_side')">
          <!--开方平台-->
          <el-select v-model="order.prescription_order_side" placeholder="开方平台" clearable @clear="handleClear">
            <el-option v-for="item in prescription_order_side" :key="item.value" :label="item.value"
              :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('express_sn')">
          <!--快递单号-->
          <el-input v-model="order.express_sn" placeholder="快递单号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('is_third')">
          <!--订单推送状态-->
          <el-select v-model="order.is_third" placeholder="订单推送状态" class="selectStyle" clearable @clear="handleClear">
            <el-option v-for="item in is_third" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('register_order_sn')">
          <!--咨询订单编号-->
          <el-input v-model="order.register_order_sn" placeholder="咨询订单编号" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('receiver_name')">
          <!--收件人-->
          <el-input v-model="order.receiver_name" placeholder="收件人" clearable @clear="handleClear"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item v-if="checkboxValInput.includes('lock_status')">
          <!--锁方状态-->
          <el-select v-model="order.lock_status" filterable remote reserve-keyword placeholder="锁方状态" remote-show-suffix
            :remote-method="remoteMethod" :loading="loading" style="width: 167.5px" clearable @clear="handleClear">
            <el-option v-for="item in lock_status" :key="item.value" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-popover trigger="click" placement="top" style="mheight: 200px;">
            <template #reference>
              <el-button type="text">筛选项设置 <img src="/src/assets/set.png"
                  style="width: 14px;margin-left: 4px;" /></el-button>
            </template>
            <template #default>
              <el-checkbox-group v-model="checkboxValInput" class="checkBox" @change="changeCheck">
                <el-checkbox v-for="item in inputTheadOptions" :label="item.prop"
                  :key="item.prop">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-popover>
        </el-form-item>
      </el-form>


      <div class="centerButton">
        <div>
          <el-button type="primary" @click="getList">筛选</el-button>
          <el-button @click="resetForm(queryFormRef)">重置</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div>
          <el-popover trigger="click" placement="top" style="mheight: 200px;">
            <template #reference>
              <el-button type="text">展示列<img src="/src/assets/bottomIcon.png" style="width:14px"></el-button>
            </template>
            <template #default>
              <el-checkbox-group v-model="checkboxVal" class="checkBox">
                <el-checkbox v-for="item in formTheadOptions" :label="item.prop"
                  :key="item.prop">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-popover>
        </div>
      </div>

      <el-table :key="key" :data="dataList" id="table" v-loading="loading">
        <el-table-column label="处方订单编号" align="center" fixed width="160">
          <template #default="scope">
            {{ scope.row.order_sn }}
          </template>
        </el-table-column>
        <el-table-column align="center" v-for="(item, index) in formHead" :key="index" :label="item.label"
          :prop="item.prop" :width="item.width">
          <template #default="scope" v-if="item.prop == 'lock_status'">
            {{scope.row[item.prop] == 1?'锁定':'无锁'}}
          </template>
          <template #default="scope" v-else>
            {{scope.row[item.prop]}}
          </template>

        </el-table-column>
        <el-table-column label="操作" align="center" width="180px" fixed="right">
          <template #default="scope">
            <el-button size="mini" type="text" @click="openDetail(scope.row.prescription_order_id)">查看</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          :small="pageConfig.small" :disabled="pageConfig.disabled" :background="pageConfig.background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
  // import {
  //   tableColumn as tableColumns,
  //   pageConfig,
  //   tableConfig
  // } from './config'
  import Table from '/src/components/Table/index.vue'
  import Form from '/src/components/Form/index.vue'
  import {
    list,
    enums,
    mechanism
  } from '/src/api/orderManage/recipeOrder'
  import {
    ref,
    nextTick,
    onMounted,
    reactive,
    unref,
    watch
  } from 'vue'
  import {
    useRoute,
    useRouter
  } from "vue-router";
  import {
    ArrowDown,
    Check,
    CircleCheck,
    CirclePlus,
    CirclePlusFilled,
    Plus
  } from '@element-plus/icons-vue'
  const router = useRouter()
  const route = useRoute()
  const queryFormRef = ref()
  const order = ref({})
  const selectTime = ref(null)
  const selectTimePay = ref(null)
  const tableSelectVisible = ref(false);
  const dataList = ref();
  const key = ref(1);
  //分页面
  const total = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const pageConfig = {
    small: false,
    disabled: false,
    background: false,
  }
  const loading = ref(false)
  const totalList = ref({})

  //动态table数组
  const formTheadOptions = ref([{
    label: '咨询订单编号',
    prop: 'ref_code',
    width: '160px'
  }, {
    label: '患者姓名',
    prop: 'patient_name'
  }, {
    label: '开方次数',
    prop: 'num'
  }, {
    label: '患者手机号',
    prop: 'patient_mobile',
    width: "160px"
  }, {
    label: '医生/团队名称',
    prop: 'doctor_name',
    width: "160px"
  }, {
    label: '归属平台',
    prop: 'col6'
  }, {
    label: '收货人信息',
    prop: 'eceiver_name',
    width: "160px"
  }, {
    label: '发货方式',
    prop: 'send_method_text'
  }, {
    label: '快递单号',
    prop: 'express_string',
    width: "160px"
  }, {
    label: '订单状态',
    prop: 'order_status_txt'
  }, {
    label: '支付状态',
    prop: 'pay_status_text'
  }, {
    label: '订单推送状态',
    prop: 'is_third',
    width: "160px"
  }, {
    label: '开方类型',
    prop: 'is_fast_prescribe'
  }, {
    label: '开方平台',
    prop: 'prescription_order_side'
  }, {
    label: '药房',
    prop: 'drugstore_string',
    width: "160px"
  }, {
    label: '订单金额',
    prop: 'total_money'
  }, {
    label: '诊金金额',
    prop: 'consulting_fee'
  }, {
    label: '药费',
    prop: 'drug_money'
  }, {
    label: '加工费',
    prop: 'cook_money'
  }, {
    label: '快递费',
    prop: 'freight_money'
  }, {
    label: '下单时间',
    prop: 'created_at',
    width: "160px"
  }, {
    label: '支付时间',
    prop: 'payment_at'
  }, {
    label: '处方未支付原因',
    prop: 'unpaid_reason',
    width: "160px"
  }, {
    label: '锁方状态',
    prop: 'lock_status'
  }]);
  //动态table
  const defaultFormThead = [{
    ...formTheadOptions
  }];
  const defaultCheckedValue = formTheadOptions.value.map(item => item.prop)
  const checkboxVal = ref(formTheadOptions.value.map(item => item.prop));

  //检索数组
  const inputTheadOptions = ref([{
    label: '患者姓名',
    prop: 'patient_name',
  }, {
    label: '医生/团队名称',
    prop: 'doctor_name',
  }, {
    label: '患者手机号',
    prop: 'patient_mobile'
  }, {
    label: '归属平台',
    prop: '',
  }, {
    label: '处方编号',
    prop: 'order_sn'
  }, {
    label: ' 药态',
    prop: 'drug_process'
  }, {
    label: '订单状态',
    prop: 'order_status'
  }, {
    label: '订单生成日期',
    prop: 'create_start_time'
  }, {
    label: ' 订单支付日期',
    prop: 'pay_start_time',
    width: ''
  }, {
    label: '是否确认处方',
    prop: 'is_confirm',
    width: ''
  }, {
    label: ' 支付状态',
    prop: 'pay_status'
  }, {
    label: '医生属地',
    prop: 'mechanism_id'
  }, {
    label: ' 药房',
    prop: 'drugstore_id'
  }, {
    label: ' 开方类型',
    prop: 'is_fast'
  }, {
    label: '开方平台',
    prop: 'prescription_order_side'
  }, {
    label: '快递单号',
    prop: 'express_sn'
  }, {
    label: '订单推送状态',
    prop: 'is_third'
  }, {
    label: '咨询订单编号',
    prop: 'register_order_sn'
  }, {
    label: ' 收件人',
    prop: 'receiver_name'
  }, {
    label: ' 锁方状态',
    prop: 'lock_status'
  }])

  //列表接口
  const getList = async () => {
    try {
      loading.value = true
      const options = {
        ...order.value
      }
      if (order.value.create_start_time != undefined) {
        console.log(order.value.create_start_time)
        options.create_start_time = order.value.create_start_time[0]
        options.create_end_time = order.value.create_start_time[1]
      } else {
        options.create_start_time = ""
        options.create_end_time = ""
      }
      if (order.value.pay_start_time != undefined) {
        options.pay_start_time = order.value.pay_start_time[0]
        options.pay_end_time = order.value.pay_start_time[1]
      } else {
        options.pay_start_time = ""
        options.pay_end_time = ""
      }
      options.current_page = currentPage.value;
      options.per_page = pageSize.value;
      const result = await list({
        ...options
      })
      console.log('处方订单列表', result)
      if (result.code == 200) {
        dataList.value = result.data.data
        total.value = result.data.total_number
        totalList.value = result.data
        loading.value = false
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  const order_status = ref([]) //订单状态
  const pay_status = ref([]) //支付状态
  const is_fast = ref([]) //开方方式
  const is_confirm = ref([]) //审核状态
  const is_third = ref([]) //三方推送状态
  const prescription_order_side = ref([]) //平台信息
  const drug_store = ref([]) //药房信息
  const drug_process = ref([]) //药态
  const lock_status = ref([{
    id: 1,
    value: "已锁方"
  }, {
    id: 2,
    value: "未锁方"
  }])
  const mechanism_list = ref([]) //属地
  //枚举接口enums
  const getEnums = async () => {
    try {
      const result = await enums()
      console.log('枚举', result)
      if (result.code == 200) {
        console.log('枚举', result.data)
        order_status.value = result.data.order_status
        pay_status.value = result.data.pay_status
        is_fast.value = result.data.is_fast
        is_confirm.value = result.data.is_confirm
        is_third.value = result.data.is_third
        prescription_order_side.value = result.data.prescription_order_side
        drug_store.value = result.data.drug_store
        drug_process.value = result.data.drug_process
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  /*属地列表*/
  const getMechanism = async () => {
    try {
      const result = await mechanism()
      console.log('枚举', result)
      if (result.code == 200) {
        console.log('属地', result.data)
        mechanism_list.value = result.data
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  //重置
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    // 清空order对象中的所有属性值
    for (const key in order.value) {
      order.value[key] = '';
    }
    getList();
  };

  const resetFormParent = () => {
    resetForm(queryFormRef.value)
  }
  //清除input框时候调用
  const handleClear = () => {
    getList()
    console.log('清除事件被触发！');
  };
  
  const handleClearD = (value)=>{
   if ([undefined, null].includes(value)) {
      getList()
      console.log('清除事件被触发！');
     } 
    // pay_start_time
    // if(order.create_start_time != un)
  }
  const checkboxValInput = ref(inputTheadOptions.value.map(item => item.prop))
  const changeCheck = (e) => {
    console.log('变化', e)
    for (const key in order.value) {
      if (!checkboxValInput.value.includes(key)) {
        // 如果不在checkboxValInput中，则清空对应的属性值
        order.value[key] = '';
      }
    }
  }

  const formHead = ref(defaultFormThead);
  //分页
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getList();
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    getList();
  }
  onMounted(() => {
    checkboxVal.value = defaultCheckedValue;
    getList()
    getEnums()
    getMechanism()
  });

  const openDetail = (id) => {
    router.push({
      name: 'recipe_manage',
      query: {
        prescription_order_id: id
      }
    });
  }

  watch(checkboxVal, (valArr) => {
    formHead.value = formTheadOptions.value.filter((item) => valArr.includes(item.prop));
    key.value += 1;
    localStorage.setItem("tableHead", JSON.stringify(formHead.value));
  });
</script>

<style lang="scss" scoped>
  ::v-deep .el-table {
    color: #515a6e;
    font-weight: 400;
    font-size: 14px !important;
  }

  ::v-deep thead tr th .cell {
    color: #515a6e;
    font-weight: 500;

  }

  ::v-deep thead tr th {
    background: #fafafa !important;
  }

  ::v-deep tbody tr td {
    font-size: 13px !important;
  }

  ::v-deep .el-form-item {
    margin-left: 0 important !important;
  }

  ::v-deep .el-range-input::placeholder {
    color: #b6bcc4;
    font-size: 12px;
  }

  ::v-deep .el-form--inline .el-form-item {
    margin-right: 8px;
    // width: 200px;
  }

  ::v-deep .el-select__wrapper {
    // margin-right: 8px;
    width: 180px;
  }

  ::v-deep .el-range-editor.el-input__wrapper {
    width: 342px;
  }

  ::v-deep .el-dropdown-item {
    padding: 10px !important;
    width: 200px;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .centerButton {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    text-align: right;
  }

  .centerButton div:last-child {
    margin-top: 10px
  }

  .checkBox {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    height: 300px;
    overflow-y: auto;
    line-height: 30px;
  }

  .checkBox ::v-deep .el-checkbox {
    padding: 6px 0;
    font-weight: 400;
  }

  .demo-pagination-block {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
  }

  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
</style>